<template>
	<section>
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
		<el-form :inline="true" :model="filters">
			<el-form-item label="游戏平台">
				<el-select v-model="roomValue" placeholder="请选择">
					<el-option
							v-for="item in room"
							:key="item.value"
							:label="item.label"
							:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="开始时间">
				<el-date-picker
						v-model="value1"
						type="datetime"
						value-format="yyyy-MM-dd HH:mm:ss"
						placeholder="选择日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="结束时间">
				<el-date-picker
						v-model="value1"
						type="datetime"
						value-format="yyyy-MM-dd HH:mm:ss"
						placeholder="选择日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" v-on:click="getUsers">查询</el-button>
			</el-form-item>
		</el-form>
		</el-col>
		<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%" :summary-method="getSummaries"
				  show-summary>
			<el-table-column prop="name" label="日期">
			</el-table-column>
			<el-table-column prop="name" label="新增用户">
			</el-table-column>
			<el-table-column prop="name" label="1日">
			</el-table-column>
			<el-table-column prop="name" label="2日">
			</el-table-column>
			<el-table-column prop="name" label="3日">
			</el-table-column>
			<el-table-column prop="name" label="7日">
			</el-table-column>
			<el-table-column prop="name" label="15日">
			</el-table-column>
			<el-table-column prop="name" label="30日">
			</el-table-column>
		</el-table>
		<el-col :span="24" class="toolbar">
			<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="15"  :total="total" style="float:right;">
			</el-pagination>
		</el-col>
	</section>
</template>

<script>
	import util from '../../common/js/util'
    import echarts from 'echarts'
	//import NProgress from 'nprogress'
	// import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';
    import Page4 from "../nav2/Page4";

	export default {
        components: {Page4},
        data() {
			return {
                editRoomVisible:false,
                roomNameValue:'',
                editRoom:[],
                roomName:[],
                governVisible:false,
                govern:[],
                governValue:'',
                controlVisible:false,
                historyVisible:false,
				filters: {
					name: ''
				},
				users: [],
                userDefault: 'online',
                chartLine: null,
				total: 100,
				page: 1,
				listLoading: false,
				sels: [],//列表选中列
                editableTabs: [
                    {
                    title: 'Tab 1',
                    name: '1',
                    content: 'Tab 1 content'
                }
                ],
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//编辑界面数据
				editForm: {
					id: 0,
					name: '',
					sex: -1,
					age: 0,
					birth: '',
					addr: ''
				},

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//新增界面数据
				addForm: {
					name: '',
					sex: -1,
					age: 0,
					birth: '',
					addr: ''
				},
                room: [
                    {
                    value: '1',
                    label: '游戏房间ID'
                }, {
                    value: '2',
                    label: '房间名称'
                }
                ],
                roomValue: '1',
                systemState: [
                    {
                        value: '1',
                        label: '系统吃分'
                    }, {
                        value: '2',
                        label: '系统吐分'
                    }
                ],
                systemValue: '1',
                bunko: [
                    {
                        value: '0',
                        label: '全部'
                    },
                    {
                        value: '1',
                        label: '输'
                    }, {
                        value: '2',
                        label: '赢'
                    }
                ],
                bunkoValue: '0'
			}
		},
		methods: {
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers() {
				let para = {
					page: this.page,
					name: this.filters.name
				};
				this.listLoading = true;
				//NProgress.start();
				getUserListPage(para).then((res) => {
					this.total = res.data.total;
					this.users = res.data.users;
					this.listLoading = false;
					//NProgress.done();
				});
			},
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '平均';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += ' %';
                    } else {
                        sums[index] = '';
                    }
                });

                return sums;
            }
		},
		mounted() {
			this.getUsers();
		}
	}

</script>

<style scoped lang="stylus">
</style>